<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Notebook</title>
    <!-- Icons & Stylesheets -->
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <style>
      body,
      html {
        padding: 0px;
        margin: 0px;
      }

      #root {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 255, 255, 0.1);
        display: flex;
      }

      .notes-enter {
        padding: 16px;

        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .notes-enter > textarea {
        width: 100%;
        flex: 1;
      }

      .notes-output {
        padding: 16px;
        flex: 1;
      }

      /* 侧边栏 */
      .notes-side {
        padding: 12px 10px;
        width: 20%;
        background-color: #eee;
        display: flex;
        flex-direction: column;
      }

      .add-btn {
        display: flex;
        align-items: center;
        color: rgba(46, 139, 87, 0.8);
        cursor: pointer;
        margin: 0 auto;
      }

      .list-box {
        padding: 10px 0px;
        flex: 1;
        overflow-y: auto;
      }

      .list-item {
        font-size: 14px;
        font-weight: 500;
        color: #000;
        padding: 8px 2px;
        border: 1px dotted slateblue;
        margin-bottom: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .list-item:hover {
        background-color: rgba(46, 139, 87, 0.8);
      }
      .list-item.active {
        background-color: rgba(46, 139, 87, 1);
        border: 2px solid slateblue;
      }

      /** 笔记操作区*/
      .notes-operate{
        display: flex;
        height: 28px;
        width: 90%;
        justify-content: space-between;
        margin-bottom: 8px;

      }
      .notes-title {
        height: 28px;
      }

      
    </style>
  </head>

  <body>
    <!-- Include the library in the page -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/marked"></script>

    <div id="root">
      <aside class="notes-side">
        <button class="add-btn" @click="addNote">
          <i class="material-icons">add</i> 添加笔记
        </button>
        <div class="list-box">
          <div
            class="list-item"
            :class="{active: note.id === selectId }"
            v-for="note of sortNotes"
            @click="noteClick(note.id)"
          >
            {{ note.title }}
            <i class="material-icons">{{ note.favorite ? 'star' : '' }}</i>
          </div>
        </div>
      </aside>
      <template v-if="selectNode">
        <div class="notes-enter">
          <div class="notes-operate">
            <input type="text" class="notes-title" v-model="selectNode.title" />
            <button @click="favoriteNote" title="Favorite note">
              <i class="material-icons"
                >{{ selectNode.favorite ? 'star' : 'star_border' }}</i
              >
            </button>
            <button @click="removeNote" title="Remove note">
              <i class="material-icons">delete</i>
            </button>
          </div>
          <textarea v-model="selectNode.content" name="" id=""></textarea>
          <div>创建时间: {{ createTime }}</div>
          <div>字符数 {{ selectNode.content.length }}</div>
        </div>
        <div v-html="previewContent" class="notes-output"></div>
      </template>
    </div>
    <script>
      new Vue({
        name: "notebook",
        el: "#root",

        data() {
          return {
            notes: JSON.parse(localStorage.getItem("notes")) || [],
            selectId: localStorage.getItem("select-id"),
          };
        },

        methods: {
          saveNotes() {
            localStorage.setItem("notes", JSON.stringify(this.notes));
          },
          addNote() {
            const time = Date.now();
            this.notes.push({
              id: String(time),
              title: `笔记 ${this.notes.length + 1}`,
              content: `# 请在这里✍️，支持使用md语法`,
              created: time,
              favorite: false,
            });
          },
          noteClick(noteId) {
            this.selectId = noteId;
            localStorage.setItem("select-id", noteId);
          },
          favoriteNote() {
            this.selectNode.favorite = !this.selectNode.favorite;
          },
          removeNote() {
            const index = this.notes.indexOf(this.selectNode);
            if (index !== -1) {
              this.notes.splice(index, 1)
            }
          },
        },

        computed: {
          previewContent() {
            return marked(this.selectNode.content);
          },
          selectNode() {
            return this.notes.find((item) => item.id === this.selectId);
          },
          sortNotes() {
            return this.notes.slice().sort((a, b) => (a.created - b.created)).sort((a, b) => (a.favorite === b.favorite ? 0 : a.favorite ? -1 : 1))
          },
          createTime() {
            return new Date(this.selectNode.created).toLocaleString()
          },
          
        },

        watch: {
          notes: {
            handler: "saveNotes",
            deep: true,
          },
        },
      });
    </script>
  </body>
</html>
